<template>
    <div id="order">
        <mt-header fixed :title="$route.params.orderState === '0'?'我的订单':'已完成订单'">
            <span slot="left">
                <mt-button icon="back" @click.native="goB">返回</mt-button>
            </span>
        </mt-header>
        <!-- 订单区域 -->
        <div class="order-content">
            <div class="list">
                 <mt-cell
                    :title="item.orderSName"
                    is-link
                    v-for="(item, index) in orderMenu"
                    :key="index"
                    @click.native="toOrderInfo(index)"
                >
                    <mt-badge type="error" size="small" v-if="item.orderFlow === 0">{{item.shopOrder.orderList.length}}</mt-badge>
                    <span v-else-if="item.orderFlow === 1">商家已发货</span>
                    <span v-else-if="item.orderFlow >=2">订单已完成</span>
                    <span v-else-if="item.orderFlow === -1">正在申请退款</span>
                    <span  v-else>已经退款</span>
                </mt-cell>
            </div>
        </div>

        <!-- 没有订单为 0显示的信息 空空如也 -->
        <div class="emplty" v-if="isEmplty">
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-meiyoudingdan"></use>
                </svg>
            </div>
            <div class="text">
                没有订单
            </div>
        </div>
        <!-- 订单详情 -->
        <transition name="lIn">
            <div class="order-info"  @click.self="() =>{isOrder = false}" v-if="isOrder">          
                <div class="info-list">
                    <div class="mon-time">
                        <p class="order-title" v-if="orderData.orderFlow=== -1 || orderData.orderFlow=== ''">
                            <span>退款理由：</span>
                            {{ orderData.orderRefundCommit}}
                        </p>
                        <p class="order-title" v-else-if = " orderData.orderFlow === 0">
                            <span>包裹：</span>
                            商家还没有发货
                        </p>
                        <p class="order-title" v-else>
                            <span>包裹：</span>
                            商家已发货
                        </p>

                        <p>金额：￥{{shopOrder.total}}</p>
                        <p>姓名：{{shopOrder.personInfo.orderName}}</p>
                        <p>地址：{{shopOrder.personInfo.orderAddre}}</p>
                        <p>电话：{{shopOrder.personInfo.orderTel}}</p>
                        <p>备注：{{shopOrder.personInfo.orderCom}}</p>
                        <p>时间：{{shopOrder.time}}</p>
                        <p>商店用户名：{{orderData.orderUName}}</p>
                        <p>用户商店名：{{orderData.orderSName}}</p>
                    </div>
                    <div class="list">
                        <ul>
                            <li v-for="(item, index) in shopOrder.orderList" :key="index">
                                <span class="name">{{item.foodName}}</span>
                                <span class="price">￥{{item.foodPrice}}</span>
                                <span class="num">X {{item.foodCount}}</span>
                                <mt-button v-if="orderData.orderState === 1 && !orderData.isCommit" 
                                    type="primary" @click.native="commitBtn(index)">发表评论</mt-button>
                                <mt-button v-else-if="orderData.isCommit" disabled>已评论</mt-button>
                            </li>
                            <li></li>
                        </ul>
                    </div>
                    <!-- 关闭 -->
                    <div class="order-close">
                            <mt-button type="danger" size="large" @click.native="refunOrder"
                                v-if="orderData.orderFlow===0">我想退款</mt-button>
                            <mt-button type="danger" size="large" @click.native="finishOrder"
                                v-if="orderData.orderFlow===1">确认付款</mt-button>
                            
                            <mt-button size="large" disabled
                                v-if="orderData.orderFlow===2 || orderData.orderFlow===3">订单已完成</mt-button>
                            
                            <mt-button size="large"
                                v-if="orderData.orderFlow===-1" disabled >正在退款</mt-button>
                            <mt-button size="large" disabled
                                v-if="orderData.orderFlow===''">已退款</mt-button>
                    </div>
                </div>
            </div>
        </transition>
         <!-- 评论的发表 -->
        <div class="commit-report" v-if="isShowCommit" @click.self="isShowCommit = false">
            <div class="commit-content">
                <p>请文明发表评论</p>
                <div class="commit-rate">
                    <mt-radio
                        v-model="commitRate"
                        :options="['好评', '差评']">
                    </mt-radio>
                </div>
                <mt-field placeholder="发表您的购买评论吧" type="textarea" rows="4" v-model="commitData"></mt-field>
                <mt-button type="primary" size="large" @click.native="sendCommit">发布评论</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
import Bscroll from 'better-scroll'
import {mapState, mapActions, mapMutations} from 'vuex'
import { MessageBox, Indicator} from 'mint-ui'
import axios from 'axios'

export default {
    data(){
        return {
            isOrder:false,//是否查看订单详情
            orderMenu: [],//获取总订单
            orderData: {},//点击订单详情的订单数据
            shopOrder: {},//订单信息
            orderIndex: 0,//当前订单索引
            isEmplty: false,//订单是否为空

            //评论的数据
            isShowCommit: false,//显示评论界面
            commitData: '',
            commitRate: '好评',//评论的类型
            foodIndex: 0//当前评论食材的索引 当点击评论的时候获取
        }
    },
    inject: ['reload', 'goB'],
    created(){

        this.setIndicator('')
         axios({
                method: 'get',
                url:'http://localhost:3003/getOrder',
                params:{
                    orderGet: this.storeFlag+'customer',
                    orderState: this.$route.params.orderState
                }
            }).then((res) =>{
                const {data, code} = res.data
               
                if(code === 1){
                    this.orderMenu = data
                }

                //判断是否为0 如果是 即显示空空如也图标 被关闭加载图标
                if(this.orderMenu.length === 0) this.isEmplty = true
                Indicator.close()
            })
    },
    computed:{
        ...mapState([
            'storeFlag',
            'uname',
            'hImg',
        ])
    },
    methods:{
        ...mapMutations([
            'setToast',
            'setIndicator'
        ]),
        ...mapActions([
            'changeOrder',
            'changeGoodInfo',
        ]),
        text(){
            this.reload()
        },
        //字符串去首位空格
        trime(str){
            return str.replace(/^\s+|\s+$/g,"")
        },
          //评论的发表
        sendCommit(){
            //this.foodIndex即为当前索引
            const {foodIndex, shopOrder, orderData} = this
            

            if(!this.commitData) return
            this.setIndicator('')
            // //修改评论
            this.changeGoodInfo({
                sname: orderData.orderSName,//商店的名字 orderData.orderSName
                foodMenu: shopOrder.orderList[foodIndex].title,//当前的食材所所属的菜单栏
                            //this.shopOrder.orderList[foodIndex].title  
                commitFlag: true,//说明是发表评论的
                data:{
                    foodName: shopOrder.orderList[foodIndex].foodName, //当前的食物食材 this.shopOrder.orderList[foodIndex].foodName 
                    foodCommit: this.commitData,//评论内容
                    commitName: this.uname,
                    commitHImg: this.hImg,
                    foodRate: this.commitRate//评论类型 差评还是 好评
                }
            })

            //修改订单状态 已经评论
             //修改订单的状态
            this.changeOrder({
                oFlag:this.orderData.oFlag,
                reload: this.reload,
                data: {
                    isCommit: true
                }
            })

            this.commitData = ''
        },
        //点击每一条食材的评论按钮
        commitBtn(index){
            this.isShowCommit = true
            this.foodIndex = index
        },
        //完成订单
        finishOrder(){

            MessageBox({
                title: '提示',
                message: '是否付款?',
                showCancelButton: true
            }).then(action =>{
                if(action === 'cancel') return

                //发送请求
                this.setIndicator('正在付款...')
                //修改月销售量
                this.changeGoodInfo({
                    sname: this.orderData.orderSName,
                    commitFlag: false,
                    data: this.sortOrder(), //获取修改数据
                })

                //修改订单的状态
                this.changeOrder({
                   oFlag:this.orderData.oFlag,
                   data: {
                        orderFlow: 2,
                        orderState: 1,
                   },
                   reload: this.reload
                })
            })

        },
        //前往订单详情
        toOrderInfo(index){
            this.orderData = this.orderMenu[index]
            this.shopOrder = this.orderMenu[index].shopOrder
            //打开面板
            this.isOrder = true           
        },

         //填写退款理由
        refunOrder(){
           MessageBox.prompt('填写申请理由').then(({ value, action }) => {

               if(!value || !this.trime(value)) value = '暂无退款理由'            
                
                this.setIndicator('正在申请退款')
                this.changeOrder({
                   oFlag:this.orderData.oFlag,
                   data:{
                        status: {
                            s: -1,
                            c: value
                        },
                        orderState: 0
                   },
                  
                   reload: this.reload
                })

           }, () =>{
               console.log('取消退款')
           })
        },

        //订单归类 目的就是为了 获取我们发送到后台的数据
        sortOrder(){
            let orderArr = []
            //获取订单 的食材列表 this.shopOrder.orderList
            this.shopOrder.orderList.forEach(item => {
                //我们要的数据
                const obj = {
                    foodTotal: item.foodCount,
                    foodName: item.foodName
                }
                //第一次 先添加一条数据 之后在归类
                if(orderArr.length === 0) return orderArr.push({title: item.title, foodData: [obj]})
                
                //判断当前的title是否存在与orderArr中，存在就把
                //订单信息追加到foodData中  否则就在push一条新数据
                const index = orderArr.findIndex(val =>{
                    return val.title === item.title
                })

                //不存在
                if(index === -1) return orderArr.push({title: item.title, foodData: [obj]})
                //存在 即在当前的 orderArr的foodData追加一条即可
                orderArr[index].foodData.push(obj)
            })

            return orderArr
        }
    }
}
</script>

<style lang="less" scoped>
    #order{
        height: 100%;
        overflow: hidden;
        .order-content{
            height: 100%;
            overflow: hidden;
            margin-top: 40px;
        }

        // 订单详情
        .order-info{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(125, 125, 125, 0.7);
            z-index: 10;
            .info-list{
                width: 90%;
                background: #fff;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%, -50%, 0);
                box-sizing: border-box;
                //金额时间
                .mon-time{
                    margin-bottom: 16px;
                    padding: 0 5px;
                    p{
                        font-size: 18px;
                        margin: 5px;
                    }
                }
                //美食列表
                .list{
                    height: 200px;
                    padding: 0 5px;
                    overflow: hidden;
                    overflow-y: auto;
                    ul{
                        li{
                            display: flex;
                            justify-content: space-between;
                            line-height: 40px;
                            height: 40px;
                        }
                    }
                }
                //关闭按钮
                .order-close{
                    display: flex;
                    margin-top: 10px;
                    .mint-button{
                        border-radius: 0;
                        height: 40px;
                    }
                }
            }
        }
        // 评论发表
        .commit-report{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 10;
            .commit-content{
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -45%;
                margin-top: -50%;
                width: 90%;
                background-color: #fff;
                p{
                    text-align: center;
                    font-size: 25px;
                    color: #49CB5F;
                    padding: 5px 0;
                }
            }
        }
    }
</style>


